<template>
    <el-row id="myRow1">
        <p id="myP1_left">
            <el-icon><Fold /></el-icon>
            <span style="color: #000;">用户管理</span>
            <span>/</span>
            <span>代理商团队</span>
        </p>
        <p></p>
    </el-row>
    <el-row id="myRow2">
        <div style="height: 2em;width: 5.5em;border:1px solid #ccc;font-size: 12px;display: flex;justify-content: center;align-items: center;gap: 2px;margin-right: 5px;">
            <div>用户</div>
            <el-icon><CloseBold /></el-icon>
        </div>
        <div style="height: 2em;width: 5.5em;border:1px solid #ccc;font-size: 12px;display: flex;justify-content: center;align-items: center;gap: 2px;margin-right: 5px;">
            <div>服务商</div>
            <el-icon><CloseBold /></el-icon>
        </div>
        <div style="height: 2em;width: 8.5em;background-color: #46BA85;font-size: 12px;display: flex;justify-content: center;align-items: center;color: white;gap: 2px;">
            <div style="width: 0.8em;height: 0.8em;border-radius: 0.4em;background-color: white;"></div>
            <div>代理商团队</div>
            <el-icon><CloseBold /></el-icon>
        </div>
    </el-row>
    <el-form :inline="true" :model="myForm" id="myForm">
        <el-form-item>
            <el-input placeholder="请输入姓名或手机号" v-model="myForm.phone"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-row id="myRow3">
        <el-button type="danger" style="margin-bottom: 1em;" @click="dialogAdd = true"><el-icon><Plus /></el-icon>添加</el-button>
        <el-button type="info" style="margin-bottom: 1em;"><el-icon><Refresh /></el-icon>刷新</el-button>
    </el-row>
    <el-table style="width: 100%;" border :data="tableData" @row-click="save">
        <el-table-column label="团队编号" prop="teamCode"></el-table-column>
        <el-table-column label="昵称" prop="members[0].nickname"></el-table-column>
        <el-table-column label="手机号" prop="members[0].phone"></el-table-column>
        <el-table-column label="加入时间" prop="joinTime"></el-table-column>
        <el-table-column label="上级代理商" prop="leader"></el-table-column>
        <el-table-column label="设备编号" prop="id"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作">
            <template #default="scoped"><el-button type="primary" @click="dialogReplace = true">更换团队</el-button></template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogReplace">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">更换团队</el-row>
        <el-form :model="myForms" label-width="auto" style="padding-left: 5em;">
            <el-form-item label="昵称" class="myFormItem1">
                <el-input v-model="myForms.nickname" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号" class="myFormItem1">
                <el-input v-model="myForms.phone" disabled></el-input>
            </el-form-item>
            <el-form-item label="更换团队" required class="myFormItem1">
                <el-select v-model="myForms.teamcode">
                    <el-option :value="33">33</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" style="margin-bottom: 3em;">
                <el-input type="textarea" v-model="myForms.remark"></el-input>
            </el-form-item>
            <el-row style="justify-content: flex-end">
                <el-button @click="dialogReplace = false">取消</el-button>
                <el-button type="primary" @click="add1">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-dialog v-model="dialogAdd">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">新增代理商</el-row>
        <el-row style="padding-left: 2em;font-size: 32px;font-weight: 600;margin-top: 2em;">不加团队直接确定默认为团长</el-row>
        <el-form :model="myFormss" style="padding-left: 5em;margin-top: 2em;">
            <el-form-item label="加入团队" style="width: 45%;">
                <el-select v-model="myForms.teamcode">
                    <el-option :value="33">33</el-option>
                </el-select>
            </el-form-item>
            <el-row style="justify-content: flex-end;margin-top: 3em;">
                <el-button @click="dialogAdd = false">取消</el-button>
                <el-button type="primary"  @click="add2">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
</template>
<script setup>
    import { reactive,ref } from 'vue';
    import axios from 'axios';
    let dialogReplace = ref(false);
    let dialogAdd = ref(false)
    let myForm = reactive({
        nickname:'',
        phone:''
    })
    let myForms = reactive({
        nickname:'',
        phone:'',
        teamcode:'',
        remark:'',
    })
    let myFormss = reactive({
        teamcode:''
    })
    let forms = reactive({})
    let formss = reactive({})
    let tableData = ref([])
    let list = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/team/teamList",myForm,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            console.log(res)
            tableData.value = res.data.dataset;
        })
    }
    list();
    let save = (value) => {
        console.log(value);
        myForms.nickname = value.members[0].nickname
        myForms.phone = value.members[0].phone
        formss.id = value.members[0].id
        forms.teamcode = value.teamcode
        forms.id = value.members[0].id
        forms.parentagentid = value.members[0].parentagentid

    }
    let add1 = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/team/updateTeam",forms,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            console.log(res)
            dialogReplace.value = false
        })
    }
    let add2 = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/team/updateTeam",myForms,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            console.log(res)
            dialogAdd.value = false
        })
    }
</script>

<style scoped lang="less">
    #myRow1{
        border-bottom: 1px solid #ccc;
        padding: 0 1em;
        box-sizing: border-box;
        height: 3em;
        display: flex;
    }
    #myP1_left{
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0;
        span{
            font-size: 14px;     
            margin-left: 0.7em;  
            color: #9AAABF; 
        }
    }
    #myRow2{
        height: 40px;
        align-items: center;
        padding: 0 1em;
        border-bottom: 1px solid #ccc;
    }
    #myForm{
        padding-left: 1.2em;
        padding-top: 1.3em;
        .el-form-item{
            width: 13%;
        }
        button{
            margin-left: 1em;
        }
    }
    #myRow3{
        justify-content: flex-end;
        padding: 0 1em;
    }
    .myFormItem1{
        width: 45%;
    }
</style>